<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="format-detection" content="telephone=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<link href="css/bksystem.css" rel="stylesheet" type="text/css" />
		<link href="font/iconfont.css" rel="stylesheet" type="text/css" />
		<link href="css/module.css" rel="stylesheet" type="text/css" />
		<link href="css/pages.css" rel="stylesheet" type="text/css" />
		<title>单页</title>
		<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
		<script src="js/template.js" type="text/javascript"></script>
		<script src="js/jquery.nicescroll.js" type="text/javascript"></script>
		<script src="js/HUpages.js" type="text/javascript"></script>
	</head>

	<body id="pagestyle" class="padding15">
		<div class="operation  mb15">
           	<button class="btn button_btn btn-danger" type="button" onclick=""><i class="iconfont">&#xe6b4</i>&nbsp;批量删除</button>
           	<button class="btn button_btn bg-deep-blue" type="button" onclick=""><i class="iconfont">&#xe61a</i>&nbsp;添加单页</button>
          </div>
          <div class="Single_page clearfix" >
          	<ul class="Single_page_list" id="Single_pageLsit">
          	</ul>
          </div>
	</body>
</html>
<script id="listhtml" type="text/html">
	<% for(var i = 0; i < list.length; i++) { %>
	<li class="page_list_content">
      <a href="#" class="link_name" title="<%=list[i].title%>"></a>
     <a href="javascript:void(0)" onclick="page_delete(this,'<%=list[i].id%>')" class="page_delete  display Single_operate"><i class="iconfont">&#xe627</i></a>
     <a href="javascript:void(0)" onclick="page_modify(this,'<%=list[i].id%>')" class="page_modify  display Single_operate"><i class="iconfont">&#xe61a</i></a>
       <div class="title_name">
       	<% if(list[i].status==0) {%>
			<span class="name_status color9" data-id="0" >[关闭]</span>
			<%} if(list[i].status==1) {%>
			<span class="name_status  colorgreen" data-id="1">[显示]</span>
			<%}%>
			<%=list[i].title%>
      </div>
       <div class="page_info">
       <%=list[i].explain%>
       </div>
       <div class="time"><%=timestamp(list[i].time,'yyyy-MM-dd hh:mm')%></div>
     </li>
	<% } %>
</script>
<script>
	//内页框架
	$(function() {
		$("#pagestyle").Hupage({
			scrollbar: function(e) {
				e.niceScroll({
					cursorcolor: "#dddddd",
					cursoropacitymax: 1,
					touchbehavior: false,
					cursorwidth: "3px",
					cursorborder: "0",
					cursorborderradius: "3px",
				});
			},
			expand: function(thisBox, settings) {
				settings.scrollbar(thisBox);
			}
		});
	});
	//获取数据	
	function articlelist() {
		var loadMore = function(callback) {
				$.ajax({
					url: "json/pages.json",
					type: "GET",
					dataType: 'json',
					success: function(ret) {
						typeof callback == 'function' && callback(ret);
					},
				});
			};
		loadMore(function(listArr) {
				var articlehtml = $('#Single_pageLsit');
				var html = template('listhtml', {
					list: listArr.data
				});
				articlehtml.append(html);
				var status = articlehtml.find('.page_list_content');
				for(var i = 0; i < status.length; i++) {
					var statusid = articlehtml.find('.name_status').eq(i).attr('data-id');
					if(statusid != 1) {
						articlehtml.find('.name_status').eq(i).addClass('statusNO');
					}
				}
		});
		template.defaults.imports.timestamp = function(date, format) {
        if (typeof date === "string") {
            var mts = date.match(/(\/Date(\d+)\/)/);
            if (mts && mts.length >= 3) {
                date = parseInt(mts[2]);
            }
        }
        date = new Date(parseInt(date * 1000));
        if (!date || date.toUTCString() == "Invalid Date") {
            return "";
        }
       var map = {
            "M": date.getMonth() + 1, //月份
            "d": date.getDate(), //日
            "h": date.getHours(), //小时
            "m": date.getMinutes(), //分
            "s": date.getSeconds(), //秒
            "q": Math.floor((date.getMonth() + 3) / 3), //季度
            "S": date.getMilliseconds() //毫秒
        };
        format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
            var v = map[t];
            if (v !== undefined) {
                if (all.length > 1) {
                    v = '0' + v;
                    v = v.substr(v.length - 2);
                }
                return v;
            } else if (t === 'y') {
                return (date.getFullYear() + '').substr(4 - all.length);
            }
            return all;
        });
        return format;
       };
	}
	articlelist();	
	    //删除
		function page_delete(e,id){
			var loadMore = function(callback) {
				$.ajax({
					url: "json/pages.json",
					type: "GET",
					dataType: 'json',
					success: function(ret) {
						typeof callback == 'function' && callback(ret);
					},
				});
			};
			loadMore(function(listArr) {
			     var lists=listArr.data;
			     for(var i=0; i<lists.length;i++){
			     	  var j=lists[i];
			     	   if(j.id==id){
	                   lists.splice(i,1); 
	                   var articlehtml = $('#Single_pageLsit');
	                   articlehtml.html('');
				       var html = template('listhtml', {
					     list:lists
				        });
				      articlehtml.append(html);
			     	}
			     }
			   })
		}
		//修改
		function page_modify(e,id){
			
			
		}
</script>